import Link from 'next/link';
import { projects } from '../data';
import { services } from '../../services/data';
import { Metadata } from 'next';

// 生成静态页面参数
export function generateStaticParams() {
  return projects.map((project) => ({
    id: project.id.toString(),
  }));
}

// 生成元数据
export function generateMetadata({ params }: { params: { id: string } }): Metadata {
  const projectId = parseInt(params.id);
  const project = projects.find(p => p.id === projectId);
  
  if (!project) {
    return {
      title: '项目未找到 | 余莉莎',
    };
  }
  
  return {
    title: `${project.title} | 余莉莎`,
    description: project.description,
  };
}

export default function ProjectPage({ params }: { params: { id: string } }) {
  const projectId = parseInt(params.id);
  const project = projects.find(p => p.id === projectId);
  
  if (!project) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h1 className="text-3xl font-bold text-primary-600 mb-4">项目未找到</h1>
          <p className="mb-6">抱歉，您所查找的项目不存在。</p>
          <Link href="/projects" className="btn-primary">
            返回项目列表
          </Link>
        </div>
      </div>
    );
  }
  
  // 获取相关服务
  const relatedService = services.find(s => s.id === project.serviceCategory);
  
  // 获取相关项目（同类别的其他项目）
  const relatedProjects = projects
    .filter(p => p.serviceCategory === project.serviceCategory && p.id !== project.id)
    .slice(0, 3); // 最多显示3个相关项目
  
  return (
    <div className="min-h-screen py-16">
      <div className="container mx-auto px-4">
        {/* 返回链接 */}
        <div className="mb-8">
          <Link href="/projects" className="text-primary-600 hover:text-primary-700 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
              <path fillRule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clipRule="evenodd" />
            </svg>
            返回项目列表
          </Link>
        </div>
        
        {/* 项目标题 */}
        <div className="mb-10">
          <h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">{project.title}</h1>
          <div className="flex flex-wrap items-center text-gray-600">
            <span className="mr-4">{project.client}</span>
            <span className="mr-4">|</span>
            <span className="mr-4">{project.year}</span>
            <span className="mr-4">|</span>
            <Link href={`/services/${project.serviceCategory}`} className="text-primary-600 hover:text-primary-700">
              {relatedService?.title}
            </Link>
          </div>
        </div>
        
        {/* 项目图片 */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-10">
          {project.images.map((image, index) => (
            <div key={index} className="rounded-lg overflow-hidden shadow-md">
              <img 
                src={image}
                alt={`${project.title} 图片 ${index + 1}`}
                className="w-full h-64 object-cover"
              />
            </div>
          ))}
        </div>
        
        {/* 项目内容 */}
        <div className="bg-white rounded-lg shadow-md p-8 mb-10">
          {/* 项目描述 */}
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">项目描述</h2>
            <p className="text-gray-700 leading-relaxed">{project.description}</p>
          </div>
          
          {/* 项目挑战 */}
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">项目挑战</h2>
            <p className="text-gray-700 leading-relaxed">{project.challenge}</p>
          </div>
          
          {/* 解决方案 */}
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">解决方案</h2>
            <p className="text-gray-700 leading-relaxed">{project.solution}</p>
          </div>
          
          {/* 项目成果 */}
          <div className="mb-8">
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">项目成果</h2>
            <ul className="list-disc pl-5 text-gray-700 space-y-2">
              {project.results.map((result, index) => (
                <li key={index}>{result}</li>
              ))}
            </ul>
          </div>
          
          {/* 技术和方法 */}
          <div>
            <h2 className="text-2xl font-semibold text-gray-800 mb-4">技术和方法</h2>
            <div className="flex flex-wrap gap-2">
              {project.technologies.map((tech, index) => (
                <span 
                  key={index} 
                  className="bg-primary-100 text-primary-800 px-3 py-1 rounded-full text-sm"
                >
                  {tech}
                </span>
              ))}
            </div>
          </div>
        </div>
        
        {/* 相关项目 */}
        {relatedProjects.length > 0 && (
          <div>
            <h2 className="text-2xl font-semibold text-gray-800 mb-6 border-l-4 border-primary-500 pl-3">
              相关项目
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {relatedProjects.map(relatedProject => (
                <Link key={relatedProject.id} href={`/projects/${relatedProject.id}`} className="block">
                  <div className="bg-white rounded-lg shadow-md overflow-hidden h-full hover:shadow-lg transition-shadow">
                    <div className="h-40 bg-gray-200">
                      <img
                        src={relatedProject.coverImage || '/images/Photo01.jpg'}
                        alt={relatedProject.title}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div className="p-4">
                      <h3 className="text-lg font-semibold text-gray-800 mb-2">{relatedProject.title}</h3>
                      <p className="text-gray-600 text-sm mb-2 line-clamp-2">{relatedProject.description}</p>
                      <span className="text-primary-500 text-sm flex items-center">
                        查看详情
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          className="h-4 w-4 ml-1"
                          viewBox="0 0 20 20"
                          fill="currentColor"
                        >
                          <path
                            fillRule="evenodd"
                            d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
                            clipRule="evenodd"
                          />
                        </svg>
                      </span>
                    </div>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        )}
        
        {/* 联系按钮 */}
        <div className="mt-10 text-center">
          <p className="text-gray-700 mb-4">对这个项目感兴趣？想了解更多类似服务？</p>
          <Link href="/#contact" className="btn-primary">
            联系我
          </Link>
        </div>
      </div>
    </div>
  );
} 